<template>
	<view>
		<view class="flex_box">
			<urSearch @clearSearch="clearSearch" @search="search"></urSearch>
			<view class="warehouse_cut">
				<view v-for="(item,index) in cutList" :key="index" class="list-box" @click="choseItem(item,index)"
					:class="choseIndex===index?'taberActive':''">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>

		<view class="commodity_box">
			<urCard v-for="(item,index) in warehouseList" :key="index" @clickEvent="getDetails(item,index)">
				<view class="orde_image">
					<text class="orderName">{{ $t('orderFrom.OrderNumber') }}</text>
					<text class="orderName" style="color:#1D1F21 ;">{{item.order_sn}}</text>
					<text :style="{color:item.statusColor,float:'right'}">{{item.status_desc}}</text>
				</view>
				<view v-for="(items,index) in item.order_detail" :key="index" class="order_detail">
					<u-image width="144rpx" height="144rpx" border-radius="4rpx" :src="items.goods_images" />
					<view class="particular">
						<view class="between">
							<view class="goods_name">
								<text>{{items.goods_name}}</text>
							</view>
							<text>￥{{items.goods_price}}</text>
						</view>
						<text class="unit_box unitAcound">x{{items.num}}</text>
					</view>
				</view>
				<view class="between">
					<text>{{item.nickname}}</text>
					<text>{{ $t('orderFrom.Total') }}<text style="color: orangered;">￥{{item.total_price}}</text></text>
				</view>
			</urCard>
		</view>
		<!-- 订单管理 -->
		<Tabbar cureentPage='warehouse'></Tabbar>
		<ur-movable @emitMovable="issueCondition"></ur-movable>
	</view>
</template>

<script>
	import Tabbar from '@/common/tabbar/tabbar.vue'
	import urMovable from "@/common/urmovable.vue"
	import urSearch from "@/components/search.vue"
	import urCard from "@/components/urcard.vue"
	import {
		orderList,
	} from '@/api/warehouse.js'
	export default {
		data() {
			return {
				isHasNextPages: 0,
				choseIndex: 0,
				cutList: [{
						name: 'All'
					}, {
						name: 'Pending'
					},
					{
						name: 'To be self-mentioned'
					},
					{
						name: 'Received'
					},
					{
						name: 'Completed'
					},
					{
						name: 'Completed'
					},
					{
						name: 'Completed'
					},
				],
				warehouseFrom: {
					page: 1,
					perPage: 10,
					order_sn: ''
				},
				warehouseList: []

			}
		},
		components: {
			Tabbar,
			urMovable,
			urSearch,
			urCard
		},
		onShow() {
			this.getFrderList()
			uni.setNavigationBarTitle({
				title: this.$t("common.Orders")
			})
		},
		onPullDownRefresh() {
			this.warehouseFrom.page = 1
			this.warehouseList = []
			this.getFrderList()
		},
		onReachBottom() {
			if (this.isHasNextPages) {
				this.warehouseFrom.page += 1
				this.getFrderList(true)
			}
		},
		methods: {
			getFrderList(a) {
				orderList(this.warehouseFrom).then(res => {
					uni.stopPullDownRefresh()
					this.isHasNextPages = res.has_more
					if (res.data.length) {
						res.data = res.data.map(code => {
							return {
								...code,
								statusColor: this.statusColor(code)
							}
						})
					}
					if (a) {
						this.warehouseList = [...this.warehouseList, ...res.data]
						return
					}
					this.warehouseList = res.data
					console.log(this.warehouseList, '54544554');
				})
			},
			statusColor(item) {
				// 1 待支付 2 已完成 3 已取消 4 待出库 5待审核 6 审核中 7 待发货
				let statusColor
				switch (item.status) {
					case 1:
						statusColor = '#0156E9'
						break;
					case 2:
						statusColor = '#309910'
						break;
					case 3:
						statusColor = '#808186'
						break;
					case 4:
						statusColor = '#E9014D'
						break;
					case 5:
						statusColor = '#0156E9'
						break;
					case 6:
						statusColor = '#FF7709'
						break;
					case 7:
						statusColor = '#E9014D'
						break;
				}
				return statusColor
			},
			search(value) {
				this.warehouseFrom.order_sn = value
				this.getFrderList()
			},
			clearSearch() {
				this.warehouseFrom.order_sn = ''
				this.getFrderList()
			},

			getDetails(item, index) {
				uni.navigateTo({
					url: '/pages/subpackage/warehouse/warehouseDetails?id=' + item.id
				})
			},
			// 创建订单
			issueCondition() {
				uni.navigateTo({
					url: '/pages/subpackage/warehouse/establish'
				})
			},
			choseItem(item, index) {
				this.choseIndex = index
			},
			showToast(title) {
				uni.showToast({
					icon: 'none',
					title: title
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex_box {
		// position: fixed;
		// margin: auto;
		// left: 0;
		// right: 0;
		// top: 76rpx;
		// background-color: #fff;
		// z-index: 1;
	}

	.searchBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.searchInput {
		width: 644rpx;
	}

	.warehouse_cut {
		margin: auto;
		margin-top: 24rpx;
		width: 664rpx;
		padding: 18rpx 0;
		border-bottom: 2rpx solid #E9E9E9;
		overflow-x: auto;
		display: flex;
		align-items: center;
		gap: 42rpx;
	}

	.list-box {
		font-family: Arial, Arial;
		font-weight: 400;
		font-size: 28rpx;
		color: #1D1F21;
		line-height: 33rpx;
		font-style: normal;
		white-space: normal;
	}

	.commodity_box {
		margin: auto;
		margin-top: 36rpx;
		padding: 0 20rpx;
		padding-bottom: 220rpx;
	}

	.orde_image {
		width: 624rpx;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #E9E9E9;
	}


	.order_detail {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 15rpx;
	}


	.particular {
		width: calc(100% - 172rpx);
		height: 164rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.goods_name {
		width: 300rpx;
		overflow: hidden;
		/* 确保超出容器的文本被裁剪 */
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		text-overflow: ellipsis;
		/* 使用省略号表示文本超出 */
		font-weight: bold;
	}

	.between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.orderName {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #77797A;
		line-height: 33rpx;
		font-style: normal;
		text-transform: none;
	}

	.unit_box {
		font-family: Arial, Arial;
		font-weight: 400;
		font-size: 20rpx;
		font-style: normal;
	}

	.unit {
		color: #494949;
	}

	.unitAcound {
		margin-left: 16rpx;
		color: #A1A1A1;
		margin-left: auto;
	}

	.taberActive {
		position: relative;

		&:before {
			content: '';
			width: 46rpx;
			height: 2px;
			background-color: #00BA8E;
			position: absolute;
			left: 0;
			right: 0;
			bottom: -36rpx;
			margin: auto;
			animation-name: example;
			animation-duration: .4s;
			z-index: 1;
		}
	}
</style>